<template>
  <Dialog :appDialog="appDialog">
    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" class="formData">
      <el-form-item label="红包标题" prop="title" >
        <el-input v-model="formData.title" type="text" maxlength="20"  placeholder="请输红包标题"></el-input>
      </el-form-item>
      <el-form-item label="红包金额" prop="amount" >
        <el-input v-model="formData.amount" @input="amountInput" placeholder="请输入金额" maxlength="15">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="红包祝福语" prop="wishes" >
        <el-input v-model="formData.wishes" type="textarea" maxlength="20" show-word-limit placeholder="请输入红包祝福语"></el-input>
      </el-form-item>
      <el-form-item label="红包描述" prop="describe" >
        <el-input v-model="formData.describe" type="textarea" maxlength="20" show-word-limit placeholder="请输入红包描述"></el-input>
      </el-form-item>
      <el-form-item label="员工备注" prop="remark" >
        <el-input v-model="formData.remark" type="textarea" maxlength="20" show-word-limit placeholder="请输入员工备注"></el-input>
      </el-form-item>
    </el-form>
    <div class="contant">
      <div>由于微信支付的【商户支付到零钱】超过2000元，需要客户实名和管理员确认，所以暂时单个红包金额的限额在2000元以内，如需发放更高金额，请联系<span @click="changePackage = true" style="color:#f7515c;font-size: 14px;cursor: pointer;">客服</span></div>
    </div>
  </Dialog>
  <!-- 扫描企微顾问，申请立即升级 -->
  <el-dialog v-model="changePackage" title="企业专属顾问" width="35%" center>
    <div class="qwQrCode">
      <img src="https://static.scrm.keyid.cn/assets/images/global/service.png" alt="" />
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import Dialog from '@/components/Dialog.vue'
import { inputCustomer } from '@/api/customerCenter'
import { gettemplatesave } from '@/api/employe/redmanage/redmanageWord'

import { ElMessage } from 'element-plus'
import { ref, reactive, watch, computed } from 'vue'
import type { ElForm } from 'element-plus'
import { getSetionId } from '@/utils/utils'
import { useStore } from '@/store'

const emit = defineEmits(['save', 'cancel'])
const pro = defineProps(['selectid'])
const selectid = ref(pro.selectid)
type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()
const store = useStore()
const changePackage = ref(false)
let rules: any = ref({
  amount: { required: true, trigger: 'blur', message: '请输入金额' },
  wishes: { required: true, trigger: 'blur', message: '请输入红包祝福语' },
  title: { required: true, trigger: 'blur', message: '请输入红包标题' },
  describe: { required: true, trigger: 'blur', message: '请输入红包描述' },
})
const formData = reactive({
  amount: '',
  wishes: '',
  describe:'',
  title:'',
  remark:'',
})
// 关闭弹框
const cancelHandel = () => {
  appDialog.value.visible = false
  emit('cancel')
}
const getOfferPrice = (value: any) => {
  if (value.indexOf('.') != -1 && value.split('.').length > 2) {
    return ElMessage.error('请输入正确的红包金额')
    // return this.$message.warning('请输入正确格式的出价') //防止输入多个小数点
  } else if (value.indexOf('.') != -1 && value.split('.')[1].length > 2) {
    return ElMessage.error('请输入正确的小数位数')
    // return this.$message.warning('请输入正确的小数位数') //小数点后两位
  }
}
const amountInput = (val: any) => {
  formData.amount = val.replace(/[^0-9.]/g,'')
}
// 保存
const submitHandel = () => {
  if (formData.amount.indexOf('.') != -1 && formData.amount.split('.').length > 2) {
    ElMessage.error('请输入正确的红包金额')
    return
  } else if (formData.amount.indexOf('.') != -1 && formData.amount.split('.')[1].length > 2) {
    ElMessage.error('请输入正确的小数位数')
    return
  } else if (!formData.amount) {
    ElMessage.error('请输入红包金额')
    return
  } else if (!formData.wishes) {
    ElMessage.error('请输入祝福语')
    return
  } else if (Number(formData.amount) > 2000){
    ElMessage.error('单个金额不得超过2000！')
    formData.amount = '2000'
    return
  }else {
    gettemplatesave(formData).then((data: any) => {
      emit('save')
      ElMessage.success('新建成功')
      appDialog.value.visible = false
      formData.amount = ''
      formData.wishes = ''
      formData.describe = ''
      formData.title = ''
      formData. remark = ''
    })
  }
}

let appDialog = ref({
  visible: false,
  title: '新建红包模板',
  width: '620px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '保存'
})

watch(
  () => appDialog.value.visible,
  (val) => {
    if (val) {
      formData.amount = ''
      formData.wishes = ''
      formData.describe = ''
      formData.title = ''
      formData. remark = ''
      // initFormData()
      // yuangongList.value = []
      // tabs.value = []
    }
  }
)

defineExpose({
  appDialog
})
</script>

<style lang="scss" scoped>
.qwQrCode {
  text-align: center;
}
.formData {
  .upload {
    .left {
      display: flex;
      margin-left: 10px;

      margin-bottom: 20px;
    }
  }
  .upload-content {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    height: 36px;
    border: 1px solid #eaeaea;
    margin-bottom: 6px;
    .upload {
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9;
      opacity: 0;
    }
    .upload-box {
      position: relative;
      width: 180px;
      height: 36px;
      border-radius: 4px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #969696;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-left: 9px;
      }
    }
    .upload-file-box {
      display: flex;
      justify-content: space-between;
      border-radius: 4px;
      border: 1px solid #eaeaea;
      width: 180px;
      height: 36px;
      line-height: 36px;
      .left {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #33302d;
        padding-left: 10px;
        span {
          vertical-align: middle;
        }
        img {
          margin-top: 8px;
          width: 20px;
          height: 20px;
          margin-right: 4px;
          vertical-align: middle;
        }
      }
      .right {
        cursor: pointer;
        width: 12px;
        height: 12px;
        margin-right: 10px;
        margin-top: 12px;
      }
    }
  }

  .download {
    font-family: STHeitiSC-Light, STHeitiSC;
    color: #ff6b00;
    margin-left: 10px;
    cursor: pointer;
  }
  .upload-desc {
    margin-top: 6px;
    background: #f9f9f9;
    border-radius: 1px;
    font-size: 12px;
    font-family: STHeitiSC-Light, STHeitiSC;
    color: #696969;
    padding: 4px 8px;
    line-height: 16px;
  }
  .tabs-box {
    margin-bottom: 7px;
    div {
      display: inline-block;
      background: #fffaf9;
      border-radius: 2px;
      border: 1px solid #ffc69e;
      justify-content: center;
      align-items: center;
      padding: 0 4px;
      line-height: 22px;
      height: 22px;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #ff6b00;
      margin-right: 10px;
      margin-bottom: 7px;
      .del-icon {
        margin-left: 8px;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
  .yuangong-list {
    div {
      display: inline-block;
      vertical-align: middle;
      background: #fffaf9;
      border-radius: 1px;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 4px 8px;
      line-height: 22px;
      box-sizing: border-box;
      img {
        width: 10px;
        height: 12px;
      }
      .del_icon {
        width: 12px;
        height: 12px;
        cursor: pointer;
      }
      span {
        margin: 0 10px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #35383a;
      }
    }
  }
}
.formData::-webkit-scrollbar {
  display: none;
}
.contant {
    border: 1px solid #eaeaea;
    background: #f9f9f9;
    padding: 15px;
    margin-bottom: 14px;
    line-height: 20px;
    div {
      color: #969696;
      font-size: 13px;
    }
  }
</style>

<style>
.upload-content .el-upload {
  display: block !important;
}

.upload-content .el-form-item__content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>
